<template>
	<view class="page-container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<layout index="/pages/index" :a_icon="true" layoutTitle="碳能管理">
				<view class="header-tools">
					<n-avatar :size="35" :src="userAvatar" />
					<view class="notification-icon">
						<n-badge :value="3">
							<n-icon name="notification" size="24" />
						</n-badge>
					</view>
				</view>
			</layout>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view scroll-y class="content-container">
			<!-- 实时监控卡片 -->
			<view class="monitor-card">
				<view class="card-header">
					<text class="card-title">实时能源监控</text>
					<text class="update-time">更新于: {{ currentTime }}</text>
				</view>
				<view class="monitor-grid">
					<view class="monitor-item primary">
						<view class="item-content">
							<view class="item-value">{{ realTimeData.power }}
								<text class="unit">kW·h</text>
							</view>
							<view class="item-label">实时用电</view>
						</view>
						<n-icon name="flash" size="24" color="#fff" />
					</view>
					<view class="monitor-item warning">
						<view class="item-content">
							<view class="item-value">{{ realTimeData.carbon }}
								<text class="unit">kg</text>
							</view>
							<view class="item-label">碳排放量</view>
						</view>
						<n-icon name="leaf" size="24" color="#fff" />
					</view>
					<view class="monitor-item success">
						<view class="item-content">
							<view class="item-value">{{ realTimeData.reduction }}
								<text class="unit">kg</text>
							</view>
							<view class="item-label">碳减排量</view>
						</view>
						<n-icon name="trending-down" size="24" color="#fff" />
					</view>
				</view>
			</view>

			<!-- 能源趋势图表 -->
			<view class="chart-card">
				<view class="card-header">
					<text class="card-title">能源趋势分析</text>
					<view class="chart-actions">
						<n-radio-group v-model:value="timeRange" size="small">
							<n-radio-button value="day">日</n-radio-button>
							<n-radio-button value="week">周</n-radio-button>
							<n-radio-button value="month">月</n-radio-button>
						</n-radio-group>
					</view>
				</view>
				<qiun-data-charts 
					:canvas2d="true"
					canvasId="energyTrend"
					type="area"
					:opts="chartOpts.trend"
					:chartData="chartData.trend"
				/>
			</view>

			<!-- 能源分布卡片 -->
			<view class="distribution-card">
				<view class="card-header">
					<text class="card-title">能源分布</text>
					<n-tag type="primary" size="small">本月</n-tag>
				</view>
				<view class="distribution-content">
					<view class="pie-chart">
						<qiun-data-charts
							type="ring"
							:opts="chartOpts.distribution"
							:chartData="chartData.distribution"
						/>
					</view>
					<view class="distribution-legend">
						<view v-for="(item, index) in energyDistribution" :key="index" class="legend-item">
							<view class="legend-color" :style="{ backgroundColor: item.color }"></view>
							<view class="legend-info">
								<text class="legend-name">{{ item.name }}</text>
								<text class="legend-value">{{ item.value }}kW·h</text>
							</view>
							<text class="legend-percentage">{{ item.percentage }}%</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 快捷操作面板 -->
			<view class="quick-actions">
				<view class="action-grid">
					<view class="action-item" v-for="(action, index) in quickActions" :key="index" @click="handleQuickAction(action)">
						<n-icon :name="action.icon" size="28" :color="action.color" />
						<text class="action-label">{{ action.label }}</text>
					</view>
				</view>
			</view>

			<!-- 报警信息 -->
			<view class="alert-card" v-if="alerts.length > 0">
				<view class="card-header">
					<text class="card-title">异常预警</text>
					<text class="view-all">查看全部</text>
				</view>
				<view class="alert-list">
					<view v-for="(alert, index) in alerts" :key="index" class="alert-item">
						<n-icon :name="alert.icon" :color="alert.color" size="24" />
						<view class="alert-content">
							<text class="alert-title">{{ alert.title }}</text>
							<text class="alert-desc">{{ alert.description }}</text>
						</view>
						<text class="alert-time">{{ alert.time }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { formatDate } from '../utils/date';

	// 实时数据
	const realTimeData = ref({
		power: '45.67',
		carbon: '28.35',
		reduction: '12.54'
	});

	// 当前时间
	const currentTime = ref(formatDate(new Date()));

	// 时间范围选择
	const timeRange = ref('day');

	// 图表配置
	const chartOpts = {
		trend: {
			color: ["#1890FF", "#91CB74"],
			padding: [15, 15, 0, 15],
			enableScroll: false,
			legend: {
				show: true,
				position: "top",
				float: "right",
			},
			xAxis: {
				disableGrid: true,
				fontColor: "#999999"
			},
			yAxis: {
				gridType: "dash",
				dashLength: 2,
				data: [{
					min: 0
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true
				}
			}
		},
		distribution: {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666"],
			padding: [5, 5, 5, 5],
			dataLabel: false,
			legend: {
				show: false
			},
			title: {
				name: "总用电量",
				fontSize: 15,
				color: "#333"
			},
			subtitle: {
				name: "89,432kW·h",
				fontSize: 12,
				color: "#666"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: false,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				}
			}
		}
	};

	// 图表数据
	const chartData = ref({
		trend: {
			categories: ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00"],
			series: [{
				name: "用电量",
				data: [35, 38, 40, 52, 60, 55, 50, 45]
			}, {
				name: "碳排放",
				data: [20, 22, 25, 30, 35, 32, 28, 25]
			}]
		},
		distribution: {
			series: [{
				data: [{
					name: "生产用电",
					value: 45
				}, {
					name: "空调用电",
					value: 25
				}, {
					name: "照明用电",
					value: 15
				}, {
					name: "其他用电",
					value: 15
				}]
			}]
		}
	});

	// 能源分布数据
	const energyDistribution = ref([
		{ name: '生产用电', value: '40,245', percentage: 45, color: '#1890FF' },
		{ name: '空调用电', value: '22,358', percentage: 25, color: '#91CB74' },
		{ name: '照明用电', value: '13,415', percentage: 15, color: '#FAC858' },
		{ name: '其他用电', value: '13,414', percentage: 15, color: '#EE6666' }
	]);

	// 快捷操作
	const quickActions = ref([
		{ label: '能耗报表', icon: 'file-text', color: '#1890FF' },
		{ label: '碳排报告', icon: 'bar-chart', color: '#91CB74' },
		{ label: '异常记录', icon: 'alert-triangle', color: '#FAC858' },
		{ label: '设备监控', icon: 'monitor', color: '#EE6666' }
	]);

	// 报警信息
	const alerts = ref([
		{
			icon: 'alert-circle',
			color: '#ff4d4f',
			title: '空调系统异常',
			description: '3号车间空调能耗异常升高',
			time: '10分钟前'
		},
		{
			icon: 'alert-triangle',
			color: '#faad14',
			title: '用电量预警',
			description: '当日用电量即将超出预算',
			time: '30分钟前'
		}
	]);

	// 处理快捷操作点击
	const handleQuickAction = (action) => {
		console.log('Quick action clicked:', action.label);
	};

	onMounted(() => {
		// 更新时间
		setInterval(() => {
			currentTime.value = formatDate(new Date());
		}, 60000);
	});
</script>

<style lang="scss" scoped>


.status-bar {
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	z-index: 100;
	position: relative;
}

.header-tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.notification-icon {
	position: relative;
}

// .content-container {
// 	padding: 16px;
// 	height: calc(100vh - 120px); /* 视窗高度减去头部和底部 */
// }

/* 实时监控卡片 */
.monitor-card {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;

	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #334155;
	}

	.update-time {
		font-size: 12px;
		color: #64748b;
	}

	.view-all {
		font-size: 12px;
		color: #6366f1;
	}
}

.monitor-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.monitor-item {
	padding: 16px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	&.primary {
		background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
	}

	&.warning {
		background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
	}

	&.success {
		background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
	}

	.item-content {
		.item-value {
			font-size: 18px;
			font-weight: 600;
			color: #fff;
			line-height: 1.2;

			.unit {
				font-size: 12px;
				font-weight: 400;
				margin-left: 2px;
			}
		}

		.item-label {
			font-size: 12px;
			color: rgba(255, 255, 255, 0.8);
			margin-top: 4px;
		}
	}
}

/* 图表卡片 */
.chart-card {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	min-height: 300px;
}

/* 能源分布卡片 */
.distribution-card {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.distribution-content {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.pie-chart {
	width: 100%;
	max-width: 220px;
	height: 220px;
	margin: 0 auto;
}

.distribution-legend {
	flex: 1;
	margin-top: 20px;
	width: 100%;
}

.legend-item {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.legend-color {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-right: 8px;
}

.legend-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.legend-name {
	font-size: 14px;
	color: #334155;
	line-height: 1.4;
}

.legend-value {
	font-size: 12px;
	color: #64748b;
}

.legend-percentage {
	font-size: 14px;
	font-weight: 600;
	color: #334155;
}

/* 快捷操作面板 */
.quick-actions {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.action-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 0;
	transition: all 0.3s ease;
	border-radius: 8px;
	
	&:hover, &:active {
		background-color: rgba(99, 102, 241, 0.05);
	}

	.action-label {
		font-size: 12px;
		color: #64748b;
		margin-top: 8px;
		text-align: center;
	}
}

/* 报警信息 */
.alert-card {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.alert-list {
	.alert-item {
		display: flex;
		align-items: flex-start;
		padding: 12px 0;
		border-bottom: 1px solid rgba(226, 232, 240, 0.6);

		&:last-child {
			border-bottom: none;
		}
	}

	.alert-content {
		flex: 1;
		margin: 0 12px;

		.alert-title {
			font-size: 14px;
			font-weight: 500;
			color: #334155;
			display: block;
			line-height: 1.4;
		}

		.alert-desc {
			font-size: 12px;
			color: #64748b;
			margin-top: 4px;
			display: block;
		}
	}

	.alert-time {
		font-size: 12px;
		color: #94a3b8;
	}
}

/* 底部导航栏 */
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	height: 60px;
	background: #fff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	z-index: 99;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #64748b;
	font-size: 12px;
	transition: all 0.3s ease;

	text {
		margin-top: 4px;
	}

	&.active {
		color: #6366f1;
	}
}
</style>